import React, { Component } from 'react'
import PropTypes from 'prop-types';


export class TabTitle extends Component {
    render() {
        const { list, activeId, changeTitle, delFn } = this.props;
        return (
            <div className='TabTitle'>
                <ul>
                    {
                        list.length ?
                            list.map(item => {
                                return item.flag ? <li
                                    key={item.id}
                                    onClick={() => { //内容切换
                                        changeTitle(item.id)
                                    }}
                                    className={item.id === activeId ? "on" : ""}
                                >
                                    <b>{item.title}</b>
                                    <span
                                        onClick={(e) => {
                                            e.stopPropagation(); //阻止冒泡
                                            delFn(item.id)
                                        }}>X</span>
                                </li> : null
                            }) : "暂无数据"
                    }
                </ul>

            </div>
        )
    }
}

// 数据类型校验 
TabTitle.propTypes = {
    list: PropTypes.array,
    changeTitle: PropTypes.func.isRequired,
    delFn: PropTypes.func.isRequired,
};

// 设置默认值
TabTitle.defaultProps = {
    list: []
};

export default TabTitle